<template>
  <div :id="pid" :style="{ ...styles }"></div>
</template>
  
  <script>
  import * as echarts from 'echarts';
export default {
  props: {
    styles: {
      type: Object,
      default: () => { }
    },
    // chartData: {
    //   type: Array,
    //   default: () => { }
    // },
    pid: {
      type: String,
      default: ''
    },
    // defaultProps: {
    //   type: Object,
    //   default: () => { }
    // },
    configs: {
      type: Object,
      default: () => { }
    }
  },
  data () {
    return {
      colorEnum: {
        blue: [
          { offset: 0, color: '#80b3ff' },
          { offset: 0.5, color: '#b2d1ff' },
          { offset: 1, color: '#e1edff' }
        ],
        red: [
          { offset: 0, color: '#fa5f5f' },
          { offset: 0.5, color: '#f8a7a7' },
          { offset: 1, color: '#fed4d4' }
        ]
      },
      chartData : [
        { host: "高速版" , percentage: 14.08},
        { host: "中速版" , percentage: 49.07 },
        { host: "低速版", percentage: 36.85 }
      ],
      // chartData : [
      //   { host: "山东" , percentage: 50},
      //   { host: "上海" , percentage: 33.3 },
      //   { host: "四川", percentage: 16 },
      //   { host: "其他", percentage: 0.7}
      // ],
      defaultProps : {label: 'host', value: 'percentage'}
    }
  },
  watch: {
    // chartData: {
    //   handler (newValue, oldValue) {
    //     this.initEcharts()
    //   },
    //   deep: true
    // }
  },
  mounted () {
    console.log('data2:', this.chartData)
    this.initEcharts()
  },
  methods: {
    initEcharts () {
      const _this = this
      const chartDom = document.getElementById('tuseTrend');
      const myChart = echarts.init(chartDom)
      const xAxis = []
      const yAxis = {
        type: 'value',
        min: 0,
        name: '单位：' + this.configs.danwei || '-'
      }
      if (this.configs.danwei === '%') yAxis.max = 100
      const series = []
      this.chartData.forEach(item => {
        xAxis.push(item[this.defaultProps.label] || 'label')
        series.push(item[this.defaultProps.value] || '0')
      })
      myChart.setOption({
        tooltip: {
          trigger: 'axis',
          formatter: function (val) {
            let string = val[0].name + "<br>"
            val.forEach(v => {
              string += `<div style='display: flex;align-items: center;justify-content: space-between;'><span>${v.marker}${v.seriesName}</span>&nbsp; &nbsp; <span style='font-weight: 400;'>${v.value}${_this.configs.danwei || ''}</span></div>`
            })
            return string
          }
        },
        legend: {
          show: true,
          right: '10'
        },
        xAxis: {
          type: "category",
          data: xAxis,
          axisLabel: {
            rotate: this.configs.rotate || 0,
            fontSize: 12
            // formatter: function (params) {
            //   let str = "" // 最终拼接成的字符串
            //   const paramsLen = params.length// 获取每项文字的个数
            //   const len = _this.configs.cutXword || 4 // 每行能显示的字的个数（根据实际情况自己设置）
            //   const rowNumber = Math.ceil(paramsLen / len) // 换行的话，需要显示几行，向上取整
            //   if (paramsLen > len) { // 大于设定的len就换行，不大于就不变化
            //     for (let i = 0; i < rowNumber; i++) {
            //       let temp = "" // 表示每一次截取的字符串
            //       const start = i * len // 开始截取的位置
            //       const end = start + len // 结束截取的位置
            //       if (i === rowNumber - 1) { // 最后一次不换行
            //         temp = params.substring(start, paramsLen)
            //       } else { // 每一次拼接字符串并换行
            //         temp = params.substring(start, end) + "\n"
            //       }
            //       str += temp // 最终拼成的字符串
            //     }
            //   } else { // 给新的字符串赋值
            //     str = params
            //   }
            //   return str // 返回字符串
            // }
          }
        },
        grid: {
          top: '10%',
          left: '8%',
          right: '3%',
          bottom: '20%'
        },
        yAxis: yAxis,
        series: [
          {
            barWidth: 30,
            name: this.configs.xName,
            type: "bar",
            data: series,
            itemStyle: {
              // color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, this.colorEnum[this.configs.color || 'blue'])
              color: '#006b6b'
            }
          }
        ]
      })
    }
  }
}
</script>
  